今天來看看讓我又愛又恨的 type

type

眾所周知，JavaScript 本身是弱型別的語言
他會根據你賦予的值，來判定當前的型別
在 JavaScript 中分別有以下幾種型別

• String
• Number
• Boolean
• Null
• Undefined
• Symbol (ES6)
• Object

在早期我在寫 JavaScript 的時候並沒有太在意
直到我碰到了 TypeScript，才知道型別的重要性

any

在編輯器中，如果我們 hover 一個變數，會顯示他所對應的型別
在 JavaScript 開發的專案，我們會很常看到 any
我一開始以為，這也沒啥嘛
到後來，工作使用 TypeScript的時候
看到 any 都會很不舒服，一定要加上 type

原因在於，當 type 為 any時
如果你撰寫不當，可能會導致錯誤，進而導致程式當掉
而且因為它的型別是 any
當我想用一些型別的 method 的時候，都不會有提示
造成我要多打好多字 (X

專案中，type的使用

我們回到專案，大部分的型別，都放在「types」的資料夾中
少部分會放在元件本身

先撇開我超不熟的泛型以外
大部分的 type 都很容易理解

在 type 的命名上都以「單數」命名
如「Post」,「OrderContact」,「ProductType」等...

唯一的特例是「Props」
在專案的早期，倘若這個型別是用於 Component 的 props
則會在這個 Type 的最後面加上 「Props」

直到了近期將其規範完整
規範如下：

• 第一層, 從後端來的資料
  • 對資料進行驗證
  • 將資料整理成前端可使用和規範的
• 第二層, 函數之間的資料
  • 用在傳遞的資料上，取得原始的型別
  • 在第二層的函式只能使用第二層的 types
• 第三層, 資料進入到元件中
  • 用於 Component 的 Props 和 custom function props 的型別，更佳的彈性和靈活
  • 使用 Pick & DeepPick

明天我們來看 helper 輔助函數